<template>
  <div class="buy-car-box">
    <Header />
    <div class="nav-outer">
      <div class="nav-1200 area1190">
        <span>首页</span> > <span>菜单列表</span> > <span>详细内容</span> >
        <!--<div class="nav-right">-->
        <!--<span>售后政策</span>-->
        <!--<i class="center-line"></i>-->
        <!--<span>咨询客服</span>-->
        <!--</div>-->
      </div>
    </div>
    <!-- 内容块 -->
    <div class="middle-box">
      <div class="content-box">
        <div @click="back()" style="padding:10px 10px 0px 10px;font-size: 16px;color: #5b5b5b;cursor: pointer"> <i class="el-icon-arrow-left
">返回</i></div>
        <div class="title"> 内容详情  </div>
        <p v-html="detail.description"></p>

      </div>
    </div>

    <Footer />
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
export default {
  name: "CarCenter",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      options: [
        {
          value: "1",
          label: "售前",
        },
        {
          value: "2",
          label: "售后",
        },

      ],
      value: "1",
      name: "",
      content: "",
      phone: "",
      detail: {},
      length:true,
    };

  },
  created() {
    let params = this.$route.query;
    let id = params.id;
    this.length = params.length;
    this.$http.get('/bot_menu/find-details/'+ id ).then( (response) => {
      this.detail = response.data;
    })
  },
  methods:{
    back(){
    //  this.$router.push('/');
      window.console.log(this.length=='true');
      //返回到上一级
      if(this.length=='true'){
        this.$router.push('/')
        return false;
      }else{
        this.$router.go(-1);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.middle-box {
  margin: 20px 0;
  .content-box {
    background: #fff;
    text-align: left;
  }
  .title {
    font-weight: normal;
    font-size: 20px;
    color: #565656;
    height: 70px;
    line-height: 70px;
    padding-left: 30px;
    border-bottom: 1px solid #f5f5f5;
    box-sizing: border-box;
  }
  p {
    font-size: 14px;
    color: #646464;
    line-height: 50px;
    padding-left: 30px;
  }
  .input-box {
    padding-left: 30px;
    box-sizing: border-box;
    padding-bottom: 50px;
  }
  .input-item {
    height: 50px;
    border: solid 1px #dcdcdc;
    padding-left: 20px;
    margin-bottom: 20px;
  }
  /deep/ .el-input {
    width: 450px;
  }
  /deep/ .el-textarea {
    width: 450px;
  }
  /deep/ .el-input__inner,
  /deep/ .el-textarea__inner {
    border: 0;
  }
  .textarea-el {
    height: auto;
    padding: 2px 0;
    padding-left: 20px;
    span {
      margin-top: 6px;
    }
  }
  .btn {
    width: 240px;
    line-height: 50px;
    background-color: #f3f3f3;
    opacity: 0.68;
    color: #333333;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    &.btn-success {
      background-color: #e20505;
      color: #f3f3f3;
    }
  }
  .three-car-box {
    position: relative;
    text-align: center;
    img {
      width: 85%;
      transform: translateY(-30px);
    }
    .phone-box {
      position: absolute;
      left: 50%;
      top: 35%;
      transform: translateX(-50%);
      text-align: center;
    }
    i {
      font-size: 30px;
      font-weight: bold;
      color: #373c3a;
    }
    .remarks {
      font-size: 14px;
      color: #777777;
    }
  }
}

/*手机端*/
@media (min-width: 320px) and (max-width: 800px) {
  .buy-car-box {
    /deep/ img {
      width: 100% !important;
      display: block;
      text-align: center;
    }
    .content-box {
      /deep/ p {
        line-height: 25px;
        box-sizing: border-box;
        padding: 0;
        width: 95%;
        margin: 0 auto;
      }
    }
  }
}
</style>